<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">
    <title>Responsive Horizontal-to-Scrollable Menu &ndash; Layout Examples &ndash; Pure</title>
    <link href="https://cdn.bootcss.com/pure/1.0.0/pure-min.css" rel="stylesheet"> {% load static %}
    <link rel="stylesheet" href="{% static 'book/book.css' %}" />
</head>

<body>
    <div class="custom-menu-wrapper">
        <div class="pure-menu custom-menu custom-menu-top">
            <a href="#" class="pure-menu-heading custom-menu-brand">Brand</a>
            <a href="#" class="custom-menu-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
        </div>
        <div class="pure-menu pure-menu-horizontal pure-menu-scrollable custom-menu custom-menu-bottom custom-menu-tucked" id="tuckedMenu">
            <div class="custom-menu-screen"></div>
            <ul class="pure-menu-list">
                <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link ">Home</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Apple</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Google</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Wang</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
            </ul>
        </div>
    </div>
    <script>
        (function(window, document) {
            document.getElementById('toggle').addEventListener('click', function(e) {
                document.getElementById('tuckedMenu').classList.toggle('custom-menu-tucked');
                document.getElementById('toggle').classList.toggle('x');
            });
        })(this, this.document);
    </script>
    <div class="main">
        <ul>
            <li><a href="#" class="pure-button pure-nav-link">Hello</a></li>
            <li><a href="#" class="pure-button">Hello</a></li>
            <li><a href="#" class="pure-button">Hello</a></li>
            <li><a href="#" class="pure-button">Hello</a></li>
            <li><a href="#" class="pure-button">Hello</a></li>
        </ul>
    </div>
</body>

</html>